<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Page Title</title> 
	<link rel="stylesheet" href="../jquery.mobile-1.0rc2.min.css" />
	<script src="../jquery-1.6.4.min.js"></script>
	<script src="../jquery.mobile-1.0rc2.min.js"></script>
</head>
<body>
     <!-- Start of first page -->
	<div data-role="page" id="page_main">
              <div data-role="header">
                     <h1>page_main</h1>
              </div><!-- /header -->
       
              <div data-role="content">	
                  	<p>
                    	<a data-transition="slide" href="#page_slide"> slide</a>	
                	</p>
              </div><!-- /content -->
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div><!-- /header -->
       </div><!-- /page -->


       
       <div data-role="page" id="page_slide">
              <div data-role="header">
                     <h1>page_slide</h1>
              </div>
       
              <div data-role="content">	
					<p>
                    	<a data-transition="slideup" href="#page_slideup"> slideup</a>	
                	</p>
              </div>
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div>
       </div>
       
        <div data-role="page" id="page_slideup">
              <div data-role="header">
                     <h1>page_slideup</h1>
              </div>
       
              <div data-role="content">	
              		<p>
						<a data-transition="slidedown" href="#page_slidedown"> slidedown</a>	
					</p>
              </div>
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div>
       </div>
       
       
       <div data-role="page" id="page_slidedown">
       
              <div data-role="header">
                     <h1>page_slidedown</h1>
              </div>
       
              <div data-role="content">	
					<p>
						<a data-transition="pop" href="#page_pop"> pop</a>	
                	</p>
              </div>
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div>
       </div>


	<div data-role="page" id="page_pop">
       
              <div data-role="header">
                     <h1>page_pop</h1>
              </div>
       
              <div data-role="content">	
					<p>
						<a data-transition="fade" href="#page_fade"> fade</a>	
                	</p>
              </div>
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div>
       </div>
       
       
       <div data-role="page" id="page_fade">
       
              <div data-role="header">
                     <h1>page_fade</h1>
              </div>
       
              <div data-role="content">	
              		<p>
                    	 <a data-transition="flip" href="#page_main"> flip</a>	
                	</p>
              </div>
       
              <div data-role="footer">
                     <h4>Page Footer</h4>
              </div>
       </div>
      
</body>
</html>
